<template>
	<view>
		<!-- <u-search placeholder="请输入关键字" v-model="keyword"></u-search> -->
		<u-search
			v-model="keyword"
			:show-action="false"
			@change="searchlist"
			placeholder="请输入关键字"
		></u-search>
		<u-sticky>
			<view style="display: flex;">
				<view class="box" @click="useforShow = true">
					项目用途: {{usefor}}
				</view>
				<view class="box" @click="statusShow = true">
					状态: {{selectStatus}}
				</view>
			</view>
		</u-sticky>
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in projlist" :key="index">
				<u-cell :title="(index+1)+'、'+ item.Name" isLink @click="backto(item.Id,item.Name,item.Usefor)" :name="item.Id" icon="https://cdn.uviewui.com/uview/example/tag.png">
				</u-cell>
			</u-list-item>
			<u-loadmore :status="status" v-if="loading"/>
		</u-list>
		<u-picker :show="useforShow" :columns="useforColumns" @cancel="useforShow=false" @confirm="useforChange"></u-picker>
		<u-picker :show="statusShow" :columns="statusColumns" @cancel="statusShow=false" @confirm="statusChange"></u-picker>
		<u-empty v-if='projlist.length==0'
		        mode="list"
		        icon="http://cdn.uviewui.com/uview/empty/list.png"
		>
		</u-empty>
	</view>
</template>

<script>
	import {
		getprojlist
	} from '@/common/api.js'
	export default {
		data() {
			return {
				projlist: [],
				keyword: "",
				pageIndex:1, //当前页数
				pageSize:20, //页数大小
				totalPage: "",//总页数
				total: 0, //数据总数
				status: 'loadmore', //加载状态
				loading: true,
				useforShow: false,
				useforColumns: [['新建','网改','维护']],
				usefor: "",
				statusShow: false,
				statusColumns: [['已立项','未立项']],
				selectStatus: ""
			}
		},
		onLoad()
		{
			this.getlist()
		},
		methods: {
			getlist() {
				// let querytype = this.$route.query.querytype
				let para = {
					Parameters:[{
						FieldName: "Usefor",
						ConditionalType: "Like",
						FieldValue: this.usefor
					},{
						FieldName: "Status",
						ConditionalType: "Like",
						FieldValue: this.selectStatus
					}],
				}
				para.Parameters = para.Parameters.filter(e => e.FieldValue != '')
				if (this.keyword != "") {
					para.Parameters.push({
						FieldName: "Name",
						ConditionalType: "Like",
						FieldValue: this.keyword
					})
				}
				para.OrderBys = ['CreateTime desc']
				para.pageSize = this.pageSize
				para.pageIndex = this.pageIndex
				getprojlist(para).then(res => {
					let data = res.data
					this.projlist.push(...data)
					this.total = res.count
					this.totalPage = Math.ceil(this.total / this.pageSize)
				})
			},
			scrolltolower(){
				// 如果当前页数大于等于总页数，状态修改为没有更多了，不再继续往下执行代码
				if(this.pageIndex >= this.totalPage) {
					this.status = 'nomore';
						return;
					} ;
				this.status = 'loading';//状态改为加载中
				this.pageIndex = ++ this.pageIndex;//页面新增一页
				this.getlist();//修改页数后，重新获取数据
			},
			async searchlist(){
				this.projlist = [] //初始化
				this.pageIndex = 1 //初始化当前页数为1
				this.loading = true
				await this.getlist()
				if(this.projlist.length < this.pageSize){
					this.loading = false; //如果数据列表小于当前页数，就让加载标签消失
					this.status = 'nomore';
				}else {
					this.status = 'loadmore';
				}
			},
			backto(Id,Name,Usefor){
				let pages = getCurrentPages() // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				   let prevPage = pages[pages.length - 2] //上一页页面实例
				   uni.navigateBack({
				     delta:1,
				     success:() => {
				        prevPage.$vm.getProj(Id,Name,Usefor) // 给上一页绑定方法otherFun,传参地址id
				     }
				   })
			},
			async useforChange(e){
				this.usefor = e.value[0]
				this.projlist = [] //初始化
				this.pageIndex = 1 //初始化当前页数为1
				this.loading = true
				await this.getlist()
				if(this.projlist.length < this.pageSize){
					this.loading = false; //如果数据列表小于当前页数，就让加载标签消失
					this.status = 'nomore';
				}else {
					this.status = 'loadmore';
				}
				this.useforShow = false
			},
			async statusChange(e){
				this.selectStatus = e.value[0]
				this.projlist = [] //初始化
				this.pageIndex = 1 //初始化当前页数为1
				this.loading = true
				await this.getlist()
				if(this.projlist.length < this.pageSize){
					this.loading = false; //如果数据列表小于当前页数，就让加载标签消失
					this.status = 'nomore';
				}else {
					this.status = 'loadmore';
				}
				this.statusShow = false
			}
		},
		}
</script>

<style>
	.box{
		text-align: center;
		width: 100%;
		height: 35px;
		background-color: #aaffff;
		line-height: 35px;
		font-size: 14px;
		border: 1px #8c8c8c solid;
	}
</style>
